<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>add-address</title>
    <link rel="stylesheet" href="../plugins/layui/layui-v2.5.6/layui/css/layui.css">
</head>
<body>
<form class="layui-form bg-blue" action="" >
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">收货人:</label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required  lay-verify="required" placeholder="请输入收货人姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址:</label>
            <div class="layui-input-inline">
                <input type="text" id="address" name="address" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机:</label>
            <div class="layui-input-inline">
                <input type="text" id="telephone" name="telephone" onblur="checkTel()" required lay-verify="required" placeholder="请输入收货电话" autocomplete="off" class="layui-input">
                <div id="telephone_prompt"style="color: red"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
              <button id="submit-btn" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
    </div>
</form>


    <script src="${pageContext.request.contextPath}/plugins/layui/layui-v2.5.6/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/jquery/jquery-3.4.1.js"></script>

    <script>
        let telephone = document.querySelector("#telephone");
        let telephone_prompt = document.querySelector("#telephone_prompt");

        $("#submit-btn").click(function () {
            let name = $("#name").val();
            let address = $("#address").val();
            let telephone = $("#telephone").val();

            console.log("name"+name);
            console.log("name"+address);
            console.log("telephone"+telephone);

            $.ajax({
                url: "${pageContext.request.contextPath}/view/add-address",
                type: "POST",
                data: {
                    "name": name,
                    "address": address,
                    "telephone": telephone
                },
                dataType:"JSON",
                success:function (result) {
                    if (result.code == 1){
                        alert("添加成功");
                        parent.layer.close(parent.layer.index)//提交后关闭弹出层
                        window.parent.location.reload()
                    }else{
                        alert("添加失败")
                    }
                }
            })
        return false;
        });

        /**
         * 手机号格式验证
         */
        function checkTel() {
            var flag = false;
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(telephone.value)){
                telephone_prompt.innerHTML = "请输入正确的手机号码";
            }else {
                telephone_prompt.innerHTML = "";
                flag = true;
            }
            return flag;
        };

    </script>
</body>
</html>